<template>
	<view class="content">
		<u-swiper :list="swiperList" indicator height="200" radius="0"></u-swiper>
		<view class="grid">
			<u-grid :border="false" @click="click" col="5">
				<u-grid-item v-for="(baseListItem,index) in baseList" :key="index">
					<u-icon space="15px" labelPos="bottom" :label="baseListItem.title" :name="baseListItem.name"
						:size="46"></u-icon>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="recommend">
			<u-text type="info" text="景点推荐"></u-text>
			<view class="list">
				<view class="list_item" v-for="(item,index) in scenicList" :key="index">
					<view class="item_body" @click="goTo(item)">
						<view class="body_left">
							<u-image :src="item.scenicPhoto |photoPrefix " radius="10px" width="225rpx" height="225rpx"
								:fade="true" duration="450"></u-image>
						</view>
						<view class="body_right">
							<view>
								<u-text size="38rpx" :text="item.scenicBase.scenicName" :lines="1"></u-text>
								<u-tag style="display: inline-block;" :text="item.scenicBase.scenicLevel+'A景区'"
									size="mini" bgColor="#E5342A" borderColor="#E5342A"></u-tag>
								<u-text :lines="1" :text="item.scenicBase.typeName"></u-text>
							</view>
							<view>
								<u-text size="24rpx" :lines="1" :text="'景点地址：'+item.scenicBase.scenicAddress"></u-text>
								<u-text size="24rpx" :lines="1"
									:text="'开放时间：'+item.scenicBase.startTime+'-'+item.scenicBase.endTime">
								</u-text>
							</view>
						</view>
					</view>
					<u-divider v-if="index+1 != scenicList.length"></u-divider>
				</view>
			</view>
		</view>
		<!-- <view class="activity">
			<u-text style="padding-bottom: 30rpx;" type="info" text="推荐活动"></u-text>
			<u-scroll-list>
				<view class="scroll-list" style="flex-direction: row;">
					<view class="scroll-list__goods-item" v-for="(item, index) in activityList" :key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
						<image class="scroll-list__goods-item__image" :src="item.activityUrl|photoPrefix "></image>
						<u-text :lines="1" :text="item.activityName"></u-text>
					</view>
					<view class="scroll-list__show-more"
						style="display: flex;flex-direction: column;justify-content: center;">
						<text class="scroll-list__show-more__text"
							@click="jump('/pages/activity/index')">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view>
				</view>
			</u-scroll-list>
		</view> -->
		<view class="scenicAlbum">
			<u-text type="info" text="景点相册"></u-text>
			<u-grid class="albumList" col="2" :border="false">
				<u-grid-item v-for="(item,index) in scenicAlbum" :key="index">
					<view class="albumImg">
						<u-image radius="10px" :showLoading="true" width="320rpx" height="300rpx" :src="item.scenicPhotoList[0].photoUrl | photoPrefix"
							@click="clickPhoto(item.scenicPhotoList[0].scenicId,item.scenicName)"></u-image>
						<view class="grid-text">
							<u-text lineHeight="50rpx" style="padding: 0rpx 10rpx;" :lines="1" color="white"
								:text="item.scenicName"></u-text>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<tabbar currentTab='index' />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/index"
	import {
		BASE_URL
	} from '@/api/index'
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				swiperList: [],
				baseList: [{
						name: require('@/static/icons/mountain.png'),
						title: '山地型'
					},
					{
						name: require('@/static/icons/prairie.png'),
						title: '草原型'
					},
					{
						name: require('@/static/icons/forest.png'),
						title: '森林型'
					}, {
						name: require('@/static/icons/wetland.png'),
						title: '湿地型'
					}, {
						name: require('@/static/icons/sea.png'),
						title: '海洋型'
					}
				],
				scenicList: [],
				scenicAlbum: [
				],
				activityList: []
			}
		},
		mounted() {
			this.getScenic();
			this.getAllPhoto();
			// this.getActivity();
		},
		methods: {
			getScenic() {
				this.$api({
					url: '/customer/getScenicRandom',
					methods: 'get',
				}).then((res) => {
					this.scenicList = res.data
				})
			},
			getAllPhoto() {
				this.$api({
					url: '/customer/getScenicPhoto',
					methods: 'get',
				}).then((res) => {
					this.swiperList = res.data.slice(0, 4).map(s => {
						return BASE_URL+s.scenicPhotoList[0].photoUrl
					})
					this.scenicAlbum = res.data.slice(0,4)
				})
			},
			getActivity() {
				this.$api({
					url: '/customer/getActive',
					methods: 'get',
				}).then((res) => {
					this.activityList = res.data
				})
			},
			click(e) {
				uni.navigateTo({
					url: '/pages/index/scenicList/index?index=' + e
				})
			},
			clickPhoto(e,c) {
				uni.navigateTo({
					url: '/pages/index/scenicPhoto/index?scenicId=' + e+'&name='+c
				})
			},
			jump(item) {
				uni.switchTab({
					url: item
				})
			},
			goTo(item) {
				uni.navigateTo({
					url: '/pages/index/scenicDetails/index?item='+encodeURIComponent(JSON.stringify(item)),
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.grid {
			// background-color: #fff;
			padding: 40rpx 20rpx;
		}

		.recommend {
			padding: 0 30rpx;

			.list {
				padding-top: 30rpx;

				.item_body {
					display: flex;

					.body_right {
						width: 100%;
						padding: 0 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}
			}
		}

		.activity {
			padding: 30rpx 30rpx 0 30rpx;

			.scroll-list {
				@include flex(column);

				&__goods-item {
					margin-right: 40rpx;

					&__image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10px;
					}

					&__text {
						color: #f56c6c;
						text-align: center;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				&__show-more {
					background-color: #fff0f0;
					border-radius: 10px;
					padding: 6rpx 12rpx;
					@include flex(column);
					align-items: center;

					&__text {
						font-size: 24rpx;
						width: 24rpx;
						color: #f56c6c;
						line-height: 32rpx;
					}
				}
			}
		}

		.scenicAlbum {
			padding: 30rpx 30rpx 0 30rpx;

			.albumList {
				padding-top: 30rpx;

				.albumImg {
					position: relative;
					margin-bottom: 30rpx;

					.grid-text {
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}


			}
		}
	}
</style>
